import React, { PureComponent } from 'react';
import { Modal, Form, Input, InputNumber } from 'antd';
const Mock = require('mockjs')
var MockRandom = Mock.Random;

const FormItem = Form.Item
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}
class usesModal extends PureComponent {
    handleOk = () => {
        const { modal = {}, handleOk, form } = this.props
        const { validateFields, getFieldsValue } = form

        validateFields(errors => {
            if (errors) {
                return
            }
            const data = {
                res: {
                    id: modal.id || new Date().getTime(),
                    avatar: modal.avatar || MockRandom.image('100x100', MockRandom.color(), '#FFF', MockRandom.character()),
                    ...getFieldsValue(),
                    createTime: modal.createTime || MockRandom.datetime()
                },
                fun:Object.keys(modal).length > 0 ? 'upDate':'add'
            }
            handleOk(data)
        })
    }
    render() {
        const { visible, confirmLoading, modal, showModal, form } = this.props;
        const { getFieldDecorator } = form
        return (
            <div>
                <Modal
                    title={Object.keys(modal).length > 0 ? '修改' : '新增'}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={showModal}
                >
                    <Form layout="horizontal">
                        <FormItem label='姓名' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('name', {
                                initialValue: modal.name,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='年龄' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('age', {
                                initialValue: modal.age,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<InputNumber />)}
                        </FormItem>
                        <FormItem label='地址' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('address', {
                                initialValue: modal.address,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='邮箱' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('mailbox', {
                                initialValue: modal.mailbox,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<Input />)}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

usesModal = Form.create({ mapPropsToFields(props){
    const { modal } = props;
    const { createFormField } = Form
    return {
        name: createFormField(modal.name),
        age: createFormField(modal.age),
        address: createFormField(modal.address),
        mailbox: createFormField(modal.mailbox)
    };
} })(usesModal);

export default usesModal